<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            width: 100px;
            border: 1px solid royalblue;
            text-align: center;
            list-style: none;
        }

        ul {

            display: flex;
            margin: 0;
            padding: 0;
        }

        .active {
            background-color: royalblue;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

        .nr {
            width: 200px;
            height: 150px;
            background-color: rgb(222, 235, 32);
            /* display: none; */
        }
        /* .actives{
            display: block;
        } */
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="active">标题1</li>
            <li>标题2</li>
            <li>标题3</li>
        </ul>
        <!-- 1. -->
        <!-- <div class="nr">标题1</div> -->

        <!-- 2. -->
        <div class="nr">标题1</div>
        <!-- <div class="nr" style="background-color: rgb(222, 235, 32);"></div>
        <div class="nr" style="background-color: rgb(128, 114, 250);"></div> -->
        
    </div>


    <script>
        let tit = document.querySelectorAll("ul>li");
        let box = document.querySelector(".box");
        let nr = document.querySelector(".nr");
        
        
        let Frag=document.createDocumentFragment();
        let ls=0;

        tit.forEach(function (item,index) {
            
            item.onclick = function () {
                tit.forEach(function(item){
                    item.classList.remove("active");
                });
                // item.classList.toggle("active", true);
                //清除上一个操作的类名
                tit[ls].classList.remove("active" ) ;
                item.classList.add("active");
                ls=index;
                // nr.innerText=item.innerText;
                // 创建容器
                // 1.
                box.removeChild("nr");
                let newLi = document.createElement("div");
                Frag.appendChild(newLi);
                box.appendChild(Frag);
                box.insertBefore(newLi,box.children[1]);
                newLi.classList.add("nr");

            }
        })
    </script>
</body>

</html>